<template>
  <div class="filter-popover" :style="currentfilterData.position">
    <div class="title">
      <div class="place"></div>
      <span>筛选</span>
      <img class="reset" :src="resetIcon" @click="handlerReset" />
    </div>
    <div
      v-for="item in list"
      :key="item.symbol"
      class="item"
      :style="selectStyle(item)"
      @click="handlerClick(item)"
    >
      <div class="place">
        <img v-if="item.symbol === symbolData.symbol" :src="gou" />
      </div>
      <div class="label">{{ item.label }}</div>
    </div>
  </div>
</template>
<script>
import gou from './icons/gou.png'
import resetIcon from './icons/reset-icon.png'

export default {
  name: 'FilterPopover',

  props: {
    currentfilterData: {
      type: Object,
      default: () => {}
    },
    cancel: {
      type: Function
    },
    updateFilterPool: {
      type: Function
    },
    filterPool: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      symbolData: {},

      gou: gou,

      resetIcon: resetIcon,

      list: [
        {
          label: '等于(E)',
          symbol: 'E'
        },
        {
          label: '不等于(N)',
          symbol: 'N'
        },
        {
          label: '大于(G)',
          symbol: 'G'
        },
        {
          label: '大于或等于(O)',
          symbol: 'O'
        },
        {
          label: '小于(L)',
          symbol: 'L'
        },
        {
          label: '小于或者等于(Q)',
          symbol: 'Q'
        },
        {
          type: 'string',
          label: '开头是(I)',
          symbol: 'I'
        },
        {
          type: 'string',
          label: '结尾是(T)',
          symbol: 'T'
        },
        {
          type: 'string',
          label: '包含(A)',
          symbol: 'A'
        },
        {
          type: 'string',
          label: '不包含(D)',
          symbol: 'D'
        },
        {
          label: '为空(B)',
          symbol: 'B'
        },
        {
          label: '不为空(C)',
          symbol: 'C'
        }
      ]
    }
  },

  watch: {
    filterPool: {
      handler() {
        const filterItem = this.filterPool.find(
          poolItem => poolItem.currentTd.id === this.currentfilterData.currentTd.id
        )
        if (filterItem) {
          this.symbolData = { ...filterItem.symbolData }
        }
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    window.addEventListener('click', this.closePopover)
  },

  beforeDestroy() {
    window.removeEventListener('click', this.closePopover)
  },

  methods: {
    selectStyle(item) {
      return item.symbol === this.symbolData.symbol
        ? { backgroundColor: '#e6e6e6' }
        : {
            backgroundColor: '#fff'
          }
    },

    handlerClick(item) {
      this.symbolData = item
      this.handlerConfirm('symbol')
    },

    handlerReset() {
      this.symbolData = {}
      this.handlerConfirm('reset')
    },

    handlerConfirm(symbol) {
      this.updateFilterPool({
        eventType: symbol,
        symbolData: this.symbolData,
        currentTd: this.currentfilterData.currentTd
      })
    },

    // 点击其他位置关闭弹窗
    closePopover(e) {
      const result = e.path.find(item => {
        return item.className && item.className.indexOf('filter') !== -1
      })
      if (!result) {
        this.cancel()
      }
    }
  }
}
</script>
<style scoped>
.filter-popover {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 0 5px #ccc;
}
.title {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  height: 40px;
  background-color: #c6c6c6;
}

.title .place {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title .place img {
  width: 12px;
  height: 12px;
}

.title .reset {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.item {
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
.item .place {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item .place img {
  width: 10px;
  height: 10px;
}
.item .label {
  margin-left: 5px;
  font-size: 12px;
}
</style>
